<template>
  <div class="Vbox">
    <span class="sizeo">
      < </span>
        <span class="sizeos"> 返回 </span>
        <div class="box">
          <div class="sizeb">
            <div class="sizea">
              金额 <span class="monys">￥{{ getpay() }}</span> 元
            </div>
            <div class="boxx">
              <van-password-input :value="inp" :focused="showKeyboard" @focus="showKeyboard = true" />
              <!-- 数字键盘 -->
              <van-number-keyboard v-model="inp" :show="showKeyboard" @blur="showKeyboard = false" @delete="() => {
                  let names = user;
                  user = names.slice(0, names.length - 1);
                }
                " theme="custom" extra-key="." close-button-text="完成" @input="onfocus($event)" />
            </div>
          </div>
        </div>
  </div>
</template>

<script setup>
// import Tx from 'ethereumjs-tx'
import { ref } from "vue";
import Web3 from "web3";
import axios from "../../utils/axios";
import qs from "qs";
var web3 = new Web3(
  Web3.givenProvider ||
  "wss://sepolia.infura.io/ws/v3/70549beb52504ea49a276561ff8210ef"
);
const user = ref(""); //
const inp = ref("");
const showKeyboard = ref(true);
const add = () => {
  alert("支付成功");
  goPayment();
};
const goPayment = () => {
  let randomNumber = '';
  for (let i = 0; i < 8; i++) {
    randomNumber += Math.floor(Math.random() * 10); // 生成0-9之间的随机数
  }
  let data = {
    orderId: randomNumber,
    price: Number(getpay().toString())
  };
  axios({
    url: "/api/payment",
    method: "post",
    headers: {
      "content-type": "application/x-www-form-urlencoded",
    },
    data: qs.stringify(data),
  }).then((res) => {
    console.log(res);
    window.location.href = res.data.result;
  });
};
const onfocus = (e) => {
  console.log(inp.value);
  user.value += e;
  if (user.value == "030505") {
    add();
    getall();
  }
};
const getpay = () => {
  let list = JSON.parse(localStorage.getItem("listc"));
  let num = 0;
  list.forEach((item) => {
    num += item.price;
  });
  return num;
};
let account = web3.eth.accounts.create(["040211"]);
let users = [
  {
    name: "冀塞佳",
    account: {
      card_number: "0x9C0570BD6a2728385b12261394ACaf67CBE8Adb5",
      card_password: "030505",
      privateKey:
        "0x6545b6fd7a7b87f47665e540ffd9f01f4af3dfb17dcb8c1af16e3f51148e7ee6",
    },
  },
  {
    name: "梁筠粟",
    account: {
      card_number: "0xD53fe1bE8168794A8B1616B59Bb3986C566517D4",
      card_password: "040211",
      privateKey:
        "0x0f5b1e4a54043da2b858f1069c68544ac95115c029151455c6c804764167815b",
    },
  },
];
const usercar = ref("0x9C0570BD6a2728385b12261394ACaf67CBE8Adb5");
const getall = async () => {
  //转给的账户
  const nonce = await web3.eth.getTransactionCount(usercar.value);
  //转账金额
  const value = Number(getpay());
  //记录转账手续费
  const gasPrice = await web3.eth.getGasPrice();
  const rawTX = {
    //接收mony的地址
    from: usercar.value,
    //转给的账户
    to: "0x8b174B929AAda0Dc30C7f6F16cC5d1E55AC7485a",
    //转账金额
    value: value,
    //转账手续费
    gasPrice: Number(gasPrice),
    //转账的nonce值
    nonce: Number(nonce),
    //
    data: "0x0000",
  };
  // const tx = new Tx(rawTX)
  // console.log(tx);
  // 生成serializedTX 有了它才能够交易
  // const serializedTX = '0x' + tx
};
</script>
<style scoped>
.Vbox {
  width: 100%;
  height: 100vh;
}

.boxx {
  margin-top: 50px;
}

.box {
  margin-top: 150px;
}

.monys {
  font-size: 22px;
  color: #e51c23;
}

.sizeo {
  font-size: 22px;
  font-weight: bold;
}

.sizeos {
  font-size: 18px;
  margin-left: 5px;
}

.sizeb {
  width: 100%;
  text-align: center;
}

.sizea {
  font-size: 19px;
}

.van-password-input {
  --van-password-input-background: #f2f2f2;
}
</style>
